<template>
    <div class="avue-top">
        <div class="top-bar__left">
            <div class="avue-breadcrumb"
                 :class="[{ 'avue-breadcrumb--active': isCollapse }]"
                 v-if="showCollapse">
                <i class="dzzw-icon-outline icon-menu" @click="setCollapse"></i>
            </div>
        </div>
        <div class="top-bar__right">
            <el-tooltip v-if="showSearch"
                        effect="dark"
                        :content="$t('navbar.search')"
                        placement="bottom">
                <div class="top-bar__item">
                    <top-search></top-search>
                </div>
            </el-tooltip>
            <el-tooltip v-if="showLock"
                        effect="dark"
                        :content="$t('navbar.lock')"
                        placement="bottom">
                <div class="top-bar__item">
                    <top-lock></top-lock>
                </div>
            </el-tooltip>
            <el-tooltip v-if="showTheme"
                        effect="dark"
                        :content="$t('navbar.theme')"
                        placement="bottom">
                <div class="top-bar__item top-bar__item--show">
                    <top-theme></top-theme>
                </div>
            </el-tooltip>
            <el-tooltip v-if="showFullScren"
                        effect="dark"
                        :content="isFullScren?$t('navbar.screenfullF'):$t('navbar.screenfull')"
                        placement="bottom">
                <div class="top-bar__item">
                    <i class="dzzw-icon-outline icon-fullscreen" @click="handleScreen"></i>
                </div>
            </el-tooltip>
            <el-dropdown>
                <span class="el-dropdown-link">
                  {{userInfo.userName}}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                        <router-link to="/info/index">{{$t('navbar.userinfo')}}</router-link>
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="logout">{{$t('navbar.logout')}}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>
<script>
import {mapGetters, mapState} from "vuex";
import {fullscreenToggel, listenfullscreen} from "@/util/util";
import topLock from "./top-lock";
import topSearch from "./top-search";
import topTheme from "./top-theme";

export default {
    components: {
        topLock,
        topSearch,
        topTheme
    },
    name: "top",
    data() {
        return {};
    },
    filters: {},
    created() {
    },
    mounted() {
        listenfullscreen(this.setScreen);
    },
    computed: {
        ...mapState({
            showTheme: state => state.common.showTheme,
            showLock: state => state.common.showLock,
            showFullScren: state => state.common.showFullScren,
            showCollapse: state => state.common.showCollapse,
            showSearch: state => state.common.showSearch
        }),
        ...mapGetters([
            "userInfo",
            "isFullScren",
            "tagWel",
            "tagList",
            "isCollapse",
            "tag",
        ])
    },
    methods: {
        handleScreen() {
            fullscreenToggel();
        },
        setCollapse() {
            this.$store.commit("SET_COLLAPSE");
        },
        setScreen() {
            this.$store.commit("SET_FULLSCREN");
        },
        logout() {
            this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
                confirmButtonText: this.$t("submitText"),
                cancelButtonText: this.$t("cancelText"),
                type: "warning"
            }).then(() => {
                this.$store.dispatch("logout").then(() => {
                    this.$router.push({path: "/login"});
                });
            }).catch(() => {
            });
        }
    }
};
</script>

<style lang="scss" scoped>
    .avue-breadcrumb i {
        font-size: 0.7em !important;
    }
</style>
